<template>
  <div :style="{ padding: '20px' }">
    <!-- 搜索 -->
    <el-form-item label="手机号">
      <el-input
        v-model="keyWord"
        placeholder="请输入医院名称"
        clearable
        :style="{ width: '200px' }"
      ></el-input>
      <el-button
        type="primary"
        size="default"
        icon="ele-Search"
        @click="searchKeyWord"
        :style="{ marginLeft: '20px' }"
        >搜索</el-button
      >
    </el-form-item>
    <!-- 表格 -->
    <el-table :data="vipList" border stripe v-loading="loading">
      <el-table-column type="index" width="80" label="序号" />
      <el-table-column label="手机号" prop="phone"> </el-table-column>
      <el-table-column label="昵称" prop="nickName"> </el-table-column>
      <el-table-column label="姓名" prop="name"> </el-table-column>
      <el-table-column label="状态" prop="param.statusString">
      </el-table-column>

      <el-table-column label="认证状态" prop="param.authStatusString">
      </el-table-column>
      <el-table-column label="创建时间" prop="createTime"> </el-table-column>
      <el-table-column label="操作">
        <template v-slot="{ row }">
          <el-button type="primary" size="small" @click="goLook(row.id)"
            >查看</el-button
          >
          <el-button type="primary" size="small" @click="unlock(row)">{{
            row.status ? "锁定" : "解锁"
          }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 页码 -->
    <el-pagination
      v-model:current-page="current"
      v-model:page-size="limit"
      :page-sizes="[5, 10, 15, 20]"
      background
      layout="total, sizes, prev, pager, next"
      :total="total"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, watch } from "vue";

export default defineComponent({
  name: "OrderList",
});
</script>

<script setup lang="ts">
import type { VipListType, VipItemType } from "@/api/vip/types";
import { reqGetVipList, reqSetLock } from "@/api/vip";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
const router = useRouter();
// 初始化数据
const keyWord = ref("");
const current = ref(1);
const limit = ref(10);
const total = ref(0);
const loading = ref(false);
const vipList = ref<VipListType>([]);

/**
 * 封装获取会员列表
 */
const getVipList = async (page: number = current.value) => {
  try {
    loading.value = true;
    const res = await reqGetVipList(page, limit.value, keyWord.value);
    vipList.value = res.records;
    total.value = res.total;
    loading.value = false;
  } catch (error: any) {
    ElMessage.error("获取会员列表失败:" + error.message);
  }
};
// 点击搜索按钮
const searchKeyWord = () => {
  getVipList(1);
};
// 初始化执行
onMounted(() => {
  getVipList();
});

//页码和每页条数改变重新发请求
watch([current, limit], () => {
  getVipList();
  //翻页之后回到顶部
  window.scrollTo(0, 0);
});

/**
 * 前往详细页面
 * @param id
 */
const goLook = (id: string) => {
  router.push(`/vip/vipDetail?id=${id}`);
};

const unlock = async (row: VipItemType) => {
  try {
    await reqSetLock(row.id, 1 - row.status);
    getVipList();
  } catch (error: any) {
    ElMessage.error("操作失败");
  }
};
</script>

<style scoped></style>
